<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";

// 移动端菜单状态
const isDrawerOpen = ref(false);

// 当前选中的子菜单和对应图片
const activeSubmenu = ref(null);
const activeImage = ref(null);

// 导航数据

const children = _WPCC_GET_DATAS("array:component.header.children()");

const navItems = [
  {
    title: "Shop By Material",
    type: "type1",
    children,
  },
  {
    title: "Shop ByCollection",
    type: "type2",
    children,
  },
  // { title: "<%location:header.nav.goods%>" },
  // { title: "<%location:header.nav.best_sellers%>" },
  // { title: "<%location:header.nav.gifts%>" },
  // { title: "<%location:header.nav.sale%>" },
  // { title: "<%location:header.nav.our_story%>" },
  { title: "Goods" },
  { title: "Best Sellers" },
  { title: "Gifts" },
  { title: "Sales" },
  { title: "our Story" },
];

const images = _WPCC_GET_DATAS("array:component.header.images()");

const activeIndex = ref(0);

// 处理子菜单hover
const handleSubmenuHover = (item, index = 0) => {
  const fi = document.querySelectorAll(".fade-img");
  activeImage.value = null;
  activeIndex.value = index;
  nextTick(() => {
    activeImage.value = images.slice(index * 2, index * 2 + 6);
  });
};

// 处理移动端抽屉开关
const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value;
  if (isDrawerOpen.value) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
};

const imgload = function (id, imgind) {
  setTimeout(() => {
    document.querySelector("#" + id + ".fade-img").classList.add("loaded");
  }, 50); //imgind * 50 + 50);
};

// 监听窗口大小变化，自动关闭抽屉
const handleResize = () => {
  if (window.innerWidth >= 1024 && isDrawerOpen.value) {
    isDrawerOpen.value = false;
    document.body.style.overflow = "";
  }
};

onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-20">
        <!-- Logo -->
        <div class="flex-shrink-0">
          <a href="/" class="text-xl font-bold">
            <img src="https://d24r3siuq13q9r.cloudfront.net/202209/e4fe151a-52db-44d9-8322-65403d4b8eee.png" class="h-12" />
          </a>
        </div>

        <!-- 桌面端导航 -->
        <nav class="hidden h-full font-[Jost] lg:flex flex-1 justify-center text-nowrap gap-[3%]">
          <div v-for="item in navItems" :key="item.title" class="group">
            <button
              class="underline-contain relative h-full 2xl:text-lg xl:text-base lg:text-sm font-bold text-gray-700 group-hover:bg-gray-50 focus:outline-none"
              @mouseenter="item.children && handleSubmenuHover(item.children[0])"
            >
              {{ item.title }}
            </button>

            <!-- 下拉菜单 -->
            <div
              v-if="item.type === 'type1'"
              class="-z-20 absolute justify-center left-0 w-screen p-8 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 flex gap-8"
            >
              <!-- 左侧子菜单 -->
              <ul>
                <li v-for="(child, cindex) in item.children" :key="child.name" @mouseenter="handleSubmenuHover(child, cindex)" class="px-4 py-2 rounded-md cursor-pointer">
                  <div class="underline-container-left duration-200" :class="{ 'text-[#d69b30]': cindex === activeIndex }">{{ child.name }}</div>
                </li>
              </ul>
              <!-- 右侧图片预览 -->
              <div class="w-2/5 whitespace-normal" v-if="activeImage">
                <div v-for="(imgi, imgind) in activeImage" :key="imgi" class="overflow-hidden m-[1.5%] rounded-md w-[30%] inline-block">
                  <img
                    :src="imgi"
                    :alt="activeSubmenu?.name"
                    :id="'fade-img-' + imgind"
                    class="fade-img inline-block object-cover hover:scale-110 cursor-pointer"
                    @load="imgload('fade-img-' + imgind, imgind)"
                  />
                </div>
              </div>
              <div></div>
              <div v-for="iii in ['https://d24r3siuq13q9r.cloudfront.net/202405/51d89d7c-c641-4e4c-b042-ccaf4eca597f.jpg']" :key="iii">
                <img :src="iii" width="860" class="cursor-pointer" />
              </div>
            </div>
            <div
              v-else-if="item.type === 'type2'"
              class="absolute py-6 px-6 flex justify-center gap-5 left-0 w-full min-h-20 shadow-lg bg-white/80 backdrop-blur-lg invisible -translate-y-4 opacity-0 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 duration-200 -z-10"
            >
              <div v-for="(ite, index) in item.children.filter((i) => i.children)" class="w-60" :key="index">
                <div class="mb-3 font-bold">{{ ite.name }}</div>
                <div v-for="(it, inde) in ite.children" :key="inde" class="leading-8 cursor-pointer underline-container-left">{{ it }} <span></span></div>
              </div>
              <div class="w-72">
                <img class="object-cover" src="https://d24r3siuq13q9r.cloudfront.net/202301/3ac90cb2-aa04-4eeb-9362-98964148a223.jpg" />
                <h2 class="text-lg font-black mt-2">The Overlord</h2>
                <p class="text-wrap text-gray-500">Drawing on a design from 1962 and inspired by New York, a city in flux, HardWear by Tiffany is an expression of love’s transformative strength.</p>
              </div>
            </div>
          </div>
        </nav>

        <div class="whitespace-nowrap">
          <button class="w-10 h-10 group relative rounded-md hover:bg-gray-100 focus:outline-none align-middle">
            <label
              for="header-search"
              class="text-center rounded-md outline-stone-600 px-1 inline-block whitespace-nowrap leading-10 min-w-full h-full cursor-pointer group-focus-within:bg-gray-100 group-focus-within:outline group-focus-within:outline-2 absolute right-0 top-0"
            >
              <svg class="inline-block align-text-bottom cursor-pointer" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                  d="M20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C13.94 20 15.72 19.31 17.1 18.16L18.94 20L20 18.94L18.16 17.1C19.31 15.72 20 13.94 20 12ZM12 18.5C8.42 18.5 5.5 15.58 5.5 12C5.5 8.42 8.42 5.5 12 5.5C15.58 5.5 18.5 8.42 18.5 12C18.5 15.58 15.58 18.5 12 18.5Z"
                  fill="currentColor"
                ></path>
              </svg>
              <input
                id="header-search"
                name="header-search"
                placeholder="What are you looking for?"
                class="bg-transparent duration-300 w-0 group-focus-within:w-24 group-focus-within:px-1 focus:outline-none outline-none"
              />
            </label>
          </button>
          <button class="w-10 h-10 text-center rounded-md hover:bg-gray-100 focus:outline-none align-middle">
            <svg class="inline-block align-text-bottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path
                d="M18.0002 7H15.7502V5.75C15.7502 4.79 14.9702 4 14.0002 4H9.99023C9.03023 4 8.24023 
						4.78 8.24023 5.75V7H5.99023C4.89023 7 3.99023 7.89 3.99023 9V18C3.99023 19.1 4.88023 20 
						5.99023 20H17.9902C19.0902 20 19.9902 19.11 19.9902 18V9C19.9902 7.9 19.1002 7 17.9902 
						7H18.0002ZM9.75023 5.75C9.75023 5.61 9.86023 5.5 10.0002 5.5H14.0102C14.1502 5.5 14.2602 
						5.61 14.2602 5.75V7H9.76023V5.75H9.75023ZM18.5002 18.01C18.5002 18.28 18.2802 18.51 18.0002 
						18.51H6.00023C5.73023 18.51 5.50023 18.29 5.50023 18.01V9.01C5.50023 8.74 5.72023 8.51 6.00023 
						8.51H8.25023V10.01H9.75023V8.51H14.2502V10.01H15.7502V8.51H18.0002C18.2702 8.51 18.5002 8.73 
						18.5002 9.01V18.01Z"
                fill="currentColor"
              ></path>
            </svg>
          </button>
          <button class="w-10 h-10 text-center rounded-md hover:bg-gray-100 focus:outline-none align-middle">
            <svg class="inline-block align-text-bottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path
                class="_no-logged_1toe5_4"
                d="M12 14C14.76 14 17 11.76 17 9C17 6.24 14.76 4 12 4C9.24 4 7 6.24 7 9C7 11.76 9.24 14 12 14ZM12 5.5C13.93 5.5 15.5 7.07 15.5 9C15.5 10.93 13.93 12.5 12 12.5C10.07 12.5 8.5 10.93 8.5 9C8.5 7.07 10.07 5.5 12 5.5ZM18.75 18V20H17.25V18C17.25 17.31 16.69 16.75 16 16.75H8C7.31 16.75 6.75 17.31 6.75 18V20H5.25V18C5.25 16.48 6.48 15.25 8 15.25H16C17.52 15.25 18.75 16.48 18.75 18Z"
                fill="currentColor"
              ></path>
              <path
                class="_logged_1toe5_1"
                d="M11.75 14C14.51 14 16.75 11.76 16.75 9C16.75 6.24 14.51 4 11.75 4C8.99 4 6.75 6.24 6.75 9C6.75 11.76 8.99 14 11.75 14ZM5 20V18C5 16.48 6.23 15.25 7.75 15.25H15.75C17.27 15.25 18.5 16.48 18.5 18V20H5Z"
                fill="var(--_g-icon-fill-color)"
              ></path>
            </svg>
          </button>
          <!-- 移动端菜单按钮 -->
          <button class="w-10 h-10 text-center lg:hidden rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none align-middle" @click="toggleDrawer">
            <svg class="inline-block align-text-bottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M20 6.5H4V5H20V6.5ZM20 11.25H4V12.75H20V11.25ZM20 17.5H4V19H20V17.5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div
      class="lg:hidden fixed top-0 right-0 w-full h-full bg-white transform transition-transform duration-300 ease-in-out overflow-y-auto"
      :class="{ 'translate-x-full': !isDrawerOpen, 'translate-x-0': isDrawerOpen }"
    >
      <div class="px-4">
        <div class="flex justify-between items-center mb-4 sticky top-0 bg-white h-20">
          <div class="flex-1"></div>
          <h2 class="mx-auto">
            <img src="https://d24r3siuq13q9r.cloudfront.net/202209/e4fe151a-52db-44d9-8322-65403d4b8eee.png" class="h-12" />
          </h2>
          <div class="flex-1 text-right">
            <button class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none" @click="toggleDrawer">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        <!-- 移动端菜单内容 -->
        <nav class="space-y-1">
          <details v-for="(item, index) in navItems" :key="item.title" class="sweep overflow-hidden" open>
            <summary class="text-gray-700 text-2xl font-medium list-none font-[Jost]">
              <input class="hidden" type="checkbox" :name="'sm-screen-details-' + index" :id="'sm-screen-details-' + index" />
              <label class="px-4 flex leading-[4rem] w-full items-center" :for="'sm-screen-details-' + index">
                <span>{{ item.title }}</span>
                <div class="ml-auto">
                  <svg fill="currentColor" height="32" viewBox="0 0 24 24" width="32" class="text-gray-700 duration-200 ml-auto">
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></path>
                    <path d="M0-.75h24v24H0z" fill="none"></path>
                  </svg>
                </div>
              </label>
            </summary>
            <ul class="ml-4 space-y-1 duration-500">
              <li v-for="child in item.children" :key="child.name" class="leading-9 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md cursor-pointer">
                <span class="font-[Jost]">{{ child.name }}</span>
                <img class="float-right" height="36" :src="child.image" />
              </li>
            </ul>
          </details>
        </nav>
      </div>
    </div>
  </header>
</template>

<style scoped>
details.sweep ul {
  max-height: 1px;
  transition: 600ms;
  overflow: hidden;
}

details.sweep:has(input:checked) > ul {
  max-height: 2000px;
}

details.sweep:has(input:checked) svg {
  transform: rotate(180deg);
}

.underline-contain::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: 1px;
  background-color: #d69b30;
  transition: 200ms;
}

.underline-contain::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  border-radius: 1px;
  background-color: #d69b30;
  transition: 200ms;
}

.group:hover .underline-contain::after,
.group:hover .underline-contain::before {
  width: 50%;
}

.fade-img {
  opacity: 0.6;
  transition: 200ms;
  /* transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); */
}

.fade-img.loaded {
  opacity: 1;
}

.underline-container-left {
  position: relative;
  width: fit-content;
}

.underline-container-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background-color: #d69b3090;
  transition: 200ms;
}

.underline-container-left:hover {
  color: #d69b30;
  transition: 200ms;
}

.underline-container-left:hover::after {
  width: 100%;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  src: url("https://fonts.gstatic.com/s/jost/v18/92zatBhPNqw73ord4iYl.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  src: url("https://fonts.gstatic.com/s/jost/v18/92zatBhPNqw73oTd4g.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts.gstatic.com/s/jost/v18/92zatBhPNqw73ord4iYl.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  src: url("https://fonts.gstatic.com/s/jost/v18/92zatBhPNqw73oTd4g.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
</style>
